import 'babel-polyfill';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link } from '$router';
import HomePage from './home';
import yoHistory from '../common/history';

import Footer from "../component/footer/index"

const Skill = require.async('./skill');
const Experience = require.async('./experience');
const Project = require.async('./project');
const Myself = require.async('./myself');


const Root = () => (
    <Router history={yoHistory}>
        <Route path="/" component={Footer}>
            <IndexRoute component={HomePage}/>
            <Route path="skill" getComponent={Skill} />
            <Route path="experience" getComponent={Experience} />
            <Route path="project" getComponent={Project}/>
            <Route path="myself" getComponent={Myself}/>
        </Route>
    </Router>
);

ReactDOM.render(<Root />, document.getElementById('root'));
